<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CK提交</title>
    <style>
        .feedback {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid;
            display: none; /* 初始隐藏 */
        }

        .success {
            color: green;
            border-color: green;
        }

        .error {
            color: red;
            border-color: red;
        }
    </style>
</head>

<body>
    <h1>选择pin</h1>
    <select id="mySelect" style="width: 100px; height: 50px;">
        <option value="">无</option>
        <option value="q751654992">W</option>
        <option value="jd_IAujVeaMgcoc">M</option>
        <option value="jd_XEQNbCzaohvl">B</option>
        <option value="jd_7e732dda05ce2">J</option>
        <option value="jd_RKygknsPzmSd">L</option>
    </select>
    <div style="width: 100%;">
        <h2>提交: ck</h2>
        <input type="text" id="ck" name="ck" style="width: 100%;height: 50px;">
        <button onclick="submitCk()" style="height: 50px;">提交ck</button>
    </div>

    <div style="width: 100%;">
        <h2>提交: wskey</h2>
        <input type="text" id="wskey" name="wskey" style="width: 100%;height: 50px;">
        <button onclick="submitWskey()" style="height: 50px;">提交wskey</button>
    </div>

    <!-- 反馈区域 -->
    <div id="feedback" class="feedback"></div>

    <script>
        const url = 'http://192.168.23.102:5701/ql?';
		var mesNum = 0;
        function showFeedback(message, isSuccess = true) {
            const feedbackDiv = document.getElementById("feedback");
            feedbackDiv.textContent = feedbackDiv.textContent + "\n" + mesNum++ + " " + message;
            feedbackDiv.className = isSuccess ? "feedback success" : "feedback error";
            feedbackDiv.style.display = "block";
        }

        function validateAndBuildInput(inputValue, type) {
            let keyName = type === 'ck' ? 'pt_key' : 'wskey';
            let format = type === 'ck' ? 'pt_key=(.*?);pt_pin=(.*?);' : 'pin=(.*?);wskey=(.*?);';
            if (!inputValue.includes('pin=')) {
                const selectElement = document.getElementById("mySelect");
                const selectedValue = selectElement.value;
                if (selectedValue === "") {
                    showFeedback('请选择pin, 或者输入pin', false);
                    return null;
                } else {
                    if(type === 'ck'){
                        inputValue = inputValue.includes('key=') ? `${inputValue};pt_pin=${selectedValue};` : `pt_key=${inputValue};pt_pin=${selectedValue};`;
                    }else{
                        inputValue = inputValue.includes('key=') ? `pin=${selectedValue};${inputValue};` : `pin=${selectedValue};wskey=${inputValue};`;
                    }
                }
            }
           if (!inputValue.match(format)) {
                showFeedback(type === 'ck' ? '格式错误, 正确格式: pt_key=*****;pt_pin=****;' : '格式错误, 正确格式: pin=*****;wskey=****;', false)
                return null
           }

            return inputValue;
        }

        function submitData(type) {
            const inputElement = document.getElementById(type);
            let inputValue = inputElement.value;

            inputValue = validateAndBuildInput(inputValue, type);
            if (!inputValue) return;
            const url = `${url}${type}=${encodeURIComponent(inputValue)}`;
            fetch(url)
                .then(response => {
                    if (response.ok) {
                        showFeedback(`${type}提交成功!`);
                    } else {
                        showFeedback(`${type}提交失败: ${response.status}`, false);
                    }
                })
                .catch(error => {
                    showFeedback(`${type}提交失败: 网络错误或其他问题`, false);
                });
        }

        function submitCk() {
            submitData('ck');
        }

        function submitWskey() {
            submitData('wskey');
        }
    </script>
</body>

</html>
